package com.snow.useviewdemo.html;

import android.os.Bundle;
import android.text.Html;
import android.widget.TextView;

import com.snow.common.base.BaseBasesActivity;
import com.snow.useviewdemo.R;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * author : zyt
 * e-mail : 632105276@qq.com
 * date   : 2019-09-09
 * desc   :通过textView加载html代码
 */
public class TestHtmlDataShowAct extends BaseBasesActivity {
    @BindView(R.id.show_text)
    TextView showText;

    @Override
    protected int getContentViewId() {
        return R.layout.act_test_html_data_show;
    }

    @Override
    protected void initView() {
        String msg = "<h1 style=\"font-size: 2.5rem;margin: 0.67em 0px;line-height: 1.5;color: rgb(51, 51, 51);font-family: -apple-system, system-ui, system-ui, &#39;Helvetica Neue&#39;, &#39;PingFang SC&#39;, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, Arial, sans-serif;white-space: normal;background-color: rgb(255, 255, 255)\">     拿到一份设计稿，我该如何进行移动端开发？ </h1> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     出来混，那些混过去的，迟早是要还的 (￣Д ￣)┍ 。 </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     让我们来解决几个问题： </p> <h2 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">     1. 什么是 viewport ? 它的的作用是啥？ </h2> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     提到&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>，之前总感觉挺突兀的，但是当我最近做移动端项目时，突然关注到一直被忽略的&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">meta</code>&nbsp;标签的时候，才恍然大悟（o(╯□╰)o）。那么，首先让我们来了解一下&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">meta</code>&nbsp;标签☛<a target=\"_blank\" href=\"https://link.juejin.im/?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F94d7c317c9a8\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">一直被忽略的meta标签了解一下</a>，之后再去看&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>，就很容易记住了，不就是&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">meta</code>&nbsp;标签中 name 属性的一个值嘛。 </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     那么， 它的作用是啥呢？要了解它具体的作用，我们需要先来了解一些相关的基本知识。 </p> <h4 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 16px\">     视口类型 </h4> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;指浏览器的窗口，即浏览器上用来显示网页的那部分区域，是用户网页的可视区域。 </p> <blockquote style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">     <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\">         <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;的功能在于控制你网站的最高块状（block）容器：<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">&lt;html&gt;</code>元素。可以理解为&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;是容纳&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">&lt;html&gt;</code>&nbsp;元素的元素。<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">&lt;html&gt;</code>&nbsp;元素的宽度为浏览器的宽度，即为&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;宽度的100%。（<a target=\"_blank\" href=\"https://link.juejin.im/?target=https%3A%2F%2Fwww.w3cplus.com%2Fcss%2Fviewports.htm\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">原文</a>）     </p> </blockquote> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     在移动端和pc端，视口是不同的。pc端的视口是浏览器窗口区域，而在移动端则有三个不同的视口概念：<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>、<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">视觉视口</code>、<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">理想视口</code>。 </p> <ul style=\"padding: 0px 0px 0px 28px\" class=\" list-paddingleft-2\">     <li>         <p>             <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">layout viewport（布局视口）</code>：网页布局的基准窗口，在PC浏览器上，相当于当前浏览器的窗口大小（不包括borders 、margins、滚动条）。在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。 可以通过&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">document.documentElement.clientWidth/clientHeight</code>&nbsp;获取网页在标准模式下的布局视口大小。         </p>     </li>     <li>         <p>             <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">visual viewport（视觉视口）</code>：用户在移动设备屏幕上能看到的那部分区域。 可以通过&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">window.innerWidth / innerHeight</code>&nbsp;来获取视觉视口大小。         </p>     </li>     <li>         <p>             <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">ideal viewport（理想视口）</code>：网站页面在移动端展示的理想大小。使页面的宽度跟设备宽度一致（布局视口=理想视口 = 视觉视口），我们就能在移动屏幕上看到正常舒服的页面。 可以通过调用&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">screen.width / height</code>&nbsp;来获取理想视口大小。         </p>     </li> </ul> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     （\uD83D\uDC49&nbsp;<a target=\"_blank\" href=\"https://juejin.im/post/5bfa99e0e51d4555557d26c6\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">viewport移动端适配</a>、<a target=\"_blank\" href=\"https://juejin.im/post/5cddf289f265da038f77696c#heading-28\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">关于移动端适配，你必须要知道的</a>） </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p>     <img alt=\"布局视口\" class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2019/9/7/16d0acb6af647f54?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p>     <img alt=\"视觉视口\" class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2019/9/7/16d0acb6af73e855?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p>     <img alt=\"理想视口\" class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2019/9/7/16d0acb6afdc4d8a?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <blockquote style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">     <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\">         <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;的设置不会对 PC 页面产生影响，但对于移动页面却很重要。     </p> </blockquote> <h4 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 16px\">     属性介绍 </h4> <table width=\"NaN\">     <thead style=\"background: rgb(246, 246, 246);color: rgb(0, 0, 0)\">         <tr class=\"firstRow\">             <th style=\"padding: 1rem 0.6rem;line-height: 2rem\">                 属性             </th>             <th style=\"padding: 1rem 0.6rem;line-height: 2rem\">                 含义             </th>             <th style=\"padding: 1rem 0.6rem;line-height: 2rem\">                 取值             </th>         </tr>     </thead>     <tbody>         <tr>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 width             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 定义视口的宽度，单位为像素             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 正整数或设备宽度device-width             </td>         </tr>         <tr style=\"background-color: rgb(252, 252, 252)\">             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 height             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 定义视口的高度，单位为像素             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 正整数或device-height             </td>         </tr>         <tr>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 initial-scale             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 定义初始缩放值             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 整数或小数             </td>         </tr>         <tr style=\"background-color: rgb(252, 252, 252)\">             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 minimum-scale             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 定义缩小最小比例，它必须小于或等于maximum-scale设置             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 整数或小数             </td>         </tr>         <tr>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 maximum-scale             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 定义放大最大比例，它必须大于或等于minimum-scale设置             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 整数或小数             </td>         </tr>         <tr style=\"background-color: rgb(252, 252, 252)\">             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 user-scalable             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 定义是否允许用户手动缩放页面，默认值yes             </td>             <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\">                 yes/no             </td>         </tr>     </tbody> </table> <h4 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 16px\">     基本用法和作用 </h4> <pre style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt; 复制代码</pre> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     上面这个基本的设置： </p> <ul style=\"padding: 0px 0px 0px 28px\" class=\" list-paddingleft-2\">     <li>         <p>             <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">width=device-width</code>：表示让&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;的宽度等于设备宽度；         </p>     </li>     <li>         <p>             <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">initial-scale=1</code>：表示页面的初始缩放比例为1，相当于让&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">视觉视口</code>&nbsp;等于&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">理想视口</code>；         </p>     </li>     <li>         <p>             <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">maximum-scale=1.0</code>&nbsp;表示页面的最大缩放比为1；         </p>     </li>     <li>         <p>             <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">user-scalable=no</code>&nbsp;表示不允许用户对页面进行缩放操作。         </p>     </li> </ul> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     \uD83C\uDF1F<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;属性的<span style=\"font-weight: 700\">作用</span>，就是让&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;通过缩放来适配屏幕宽度，<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">width=device.width</code>&nbsp;仅仅是让&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;初始大小等于设备宽度，后面设置的<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">initial-scale</code>&nbsp;是用来缩放&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;大小，而且默认是&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;初始大小等于设备宽度，也就是所谓的&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">理想视口</code>。 </p> <h2 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">     2. 什么是 rem？它的布局原理是什么？ </h2> <blockquote style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">     <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\">         rem（font size of the root element）：是指相对于根元素的字体大小的单位，其布局的本质是等比缩放，一般是基于宽度。     </p> </blockquote> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     将设计稿转化为手机屏幕上的内容，就类似于画地图，按照一定的比例进行缩小绘制： </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p>     <img class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2019/9/7/16d0af6c8fc5f9fb?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <h2 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">     3. 为什么要进行 scale 缩放？scale 与 dpr 的关系？ </h2> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <span style=\"font-weight: 700\">dpr ( device pixel ratio)</span>：设备像素比，即设备物理像素与逻辑像素(css像素)的比例。 </p> <pre style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">window.devicePixelRatio 复制代码</pre> <ul style=\"padding: 0px 0px 0px 28px\" class=\" list-paddingleft-2\">     <li>         <p>             web前端领域，像素分为&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">设备像素</code>&nbsp;和&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">CSS像素</code>；         </p>     </li>     <li>         <p>             一个&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">CSS像素</code>&nbsp;的大小是可变的，比如用户缩放页面的时候，实际上就是在缩小或放大&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">CSS像素</code>，而&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">设备像素</code>&nbsp;无论大小还是数量都是不变的。         </p>     </li> </ul> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     【设计稿】：设计师给的&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">750px</code>&nbsp;宽的设计稿是根据<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">设备像素</code>（<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">device pixel，物理像素</code>）为单位制作的设计稿。 </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     【web页面编写】：前端工程师在编码 web 页面时所写的&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">CSS 像素</code>&nbsp;则需要根据&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">设备像素比</code>&nbsp;来进行换算。 </p> <blockquote style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">     <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\">         设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width) ，则：     </p>     <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\">         CSS像素 = 设计稿像素/dpr。     </p> </blockquote> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p>     <img class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2019/9/7/16d0acb6b043f260?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     缩放会影响&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;的大小，当我们在移动端对页面进行放大和缩小时，实际上是在改变 CSS 像素的大小，而&nbsp;<span style=\"font-weight: 700\">scale 缩放的目的就是为了使 CSS 像素适应移动端的设备像素</span>，而这个缩放是通过两个关键的元素设置来实现的： </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">width=device-width,initial-scale=1/dpr</code> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     做的事情就是先把布局视口放大dpr倍，然后再整体缩放相应倍数以适应设备尺寸，这样就能够使css像素和设备物理像素一对一了。 </p> <pre style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) {     // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案     if (devicePixelRatio &gt;= 3 &amp;&amp; (!dpr || dpr &gt;= 3)) {                         dpr = 3;     } else if (devicePixelRatio &gt;= 2 &amp;&amp; (!dpr || dpr &gt;= 2)){         dpr = 2;     } else {         dpr = 1;     } } else {     // 其他设备下，仍旧使用1倍的方案     dpr = 1; } scale = 1 / dpr; 复制代码</pre> <blockquote style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">     <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\">         \uD83D\uDCA1rem 是为了解决不同机型不同宽度的问题，scale是为了解决dpr的问题。移动端自适应与dpr是无关的。     </p> </blockquote> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     淘宝方案中采用了dpr用于解决1px的问题，而网易方案并没有引入dpr，布局视口没有放大，整个页面也没有缩放，但是并不影响与设计图的比例。 </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     ➹&nbsp;<a target=\"_blank\" href=\"https://juejin.im/post/5b346e8f5188251e1d39bd09\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">真的，移动端尺寸自适应与dpr无关</a> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     ➹&nbsp;<a target=\"_blank\" href=\"https://link.juejin.im/?target=https%3A%2F%2Fwww.kancloud.cn%2Fchandler%2Fweb_app%2F591334\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">详解适配相关概念</a> </p> <hr/> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     明白了上述几个问题了之后，我们就掌握了移动端自适应的精髓，从而可以进行实战开发了。 </p> <h2 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">     \uD83D\uDE4B拿到设计稿，该怎么下手？ </h2> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     通过上面的&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">rem</code>&nbsp;换算，我们能够知道，如何把视觉稿（<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">750px</code>）中元素的&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">px</code>&nbsp;转换成&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">rem</code>。 </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     （1）设置 html font-size，如将手机屏幕分成10份： </p> <pre style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">&lt;script&gt;     var dpr = window.devicePixelRatio;     var meta = document.createElement(&#39;meta&#39;);     // dpr     meta.setAttribute(&#39;content&#39;, &#39;initial-scale=&#39; + 1 / dpr + &#39;, maximum-scale=&#39; + 1 / dpr + &#39;, minimum-scale=&#39; + 1 / dpr + &#39;, user-scalable=no&#39;);     document.getElementsByTagName(&#39;head&#39;)[0].appendChild(meta);     // rem     document.addEventListener(&#39;DOMContentLoaded&#39;, function (e) {         document.getElementsByTagName(&#39;html&#39;)[0].style.fontSize = window.innerWidth / 10 + &#39;px&#39;;     }, false); &lt;/script&gt; 复制代码</pre> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     （2）假设元素宽度为&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">300px</code>，则元素宽度： </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p>     <img class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2019/9/7/16d0acb6b044a0bd?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     可以通过以下的方案来实现自动转换： </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     ✔&nbsp;<a target=\"_blank\" href=\"https://link.juejin.im/?target=https%3A%2F%2Fsass-lang.com%2Fdocumentation%2Fat-rules%2Ffunction\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">Scss</a>&nbsp;方案 </p> <pre style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">$ue-width: 750; /* ue图的宽度 */ @function px2rem($px) {   @return #{$px/$ue-width*10}rem; } p {   width: px2rem(100); } 复制代码</pre> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     ✔ vscode 中进行&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">px</code>&nbsp;到&nbsp;<code style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">rem</code>&nbsp;的转换：<a target=\"_blank\" href=\"https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fcipchk%2Fvscode-cssrem\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">vscode-cssrem</a> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     ✔&nbsp;<a target=\"_blank\" href=\"https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fcuth%2Fpostcss-pxtorem\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">postcss-pxtorem</a>&nbsp;方案 </p> <pre style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">// postcss.config.js const pxtorem = require(&#39;postcss-pxtorem&#39;); const pxtoremOpts = {     rootValue: 16,  // 根字体大小，默认16     unitPrecision: 5,  // 精度     propList: [&#39;font&#39;, &#39;font-size&#39;, &#39;line-height&#39;, &#39;letter-spacing&#39;],  // 可以将px转换成rem的属性     selectorBlackList: [],  // 选择器忽略并保留px     replace: true,  // 替换包含rems的规则     mediaQuery: false,  // 是否允许在媒体查询中转换px     minPixelValue: 2  // 设置要替换的最小像素值 }; module.exports = {   plugins: [     pxtorem(pxtoremOpts),   ], }; 复制代码</pre> <h2 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">     5. 常见移动端分辨率 </h2> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p>     <img class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2019/9/7/16d0acb6d7382975?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     <br/> </p> <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">     点击&nbsp;<a target=\"_blank\" href=\"https://link.juejin.im/?target=https%3A%2F%2Fmaterial.io%2Fresources%2Fdevices%2F\" style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">DEVICE METRICS</a>&nbsp;查看更多终端设备的参数。 </p> <p>     <br/> </p>";
        showText.setText(Html.fromHtml(msg));
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ButterKnife.bind(this);
    }
}
